<template>
	<view class="wallet-container">
		<!-- 余额卡片 -->
		<view class="balance-card">
			<view class="balance-title">我的余额</view>
			<view class="balance-amount">￥{{userInfo.balance || '0.00'}}</view>
			<view class="balance-actions">
				<view class="action-btn" @click="handleWithdraw">提现</view>
				<view class="action-btn" @click="handleCashList">提现记录</view>
			</view>
		</view>
		
		<!-- 钱包记录 -->
		<view class="transaction-section">
			<view class="section-title">钱包记录</view>
			<view class="transaction-list">
				<!-- 无数据展示 -->
				<view v-if="balanceLogs.length === 0 && !loading" class="empty-box">
					<image src="/static/empty.png" mode="aspectFit" class="empty-icon"></image>
					<text class="empty-text">暂无记录</text>
				</view>
				
				<!-- 记录列表 -->
				<template v-else>
					<view class="transaction-item" v-for="(item, index) in balanceLogs" :key="index">
						<view class="trans-left">
							<text class="trans-type">{{item.amount_type_string}}</text>
							<text v-if="item.created_at" class="trans-time">时间：{{item.created_at}}</text>
							<text v-if="item.from_no" class="trans-time">单号：{{item.from_no}}</text>
						</view>
						<view class="trans-right">
							<text class="trans-amount" :class="item.change_type === 'in' ? 'income' : 'expense'">
								{{item.change_type === 'in' ? '+' : '-'}}{{item.amount}}
							</text>
							<text v-if="item.after_balance" class="trans-balance">余额: ￥{{item.after_balance}}</text>
						</view>
					</view>
					
					<!-- 加载状态 -->
					<view class="loading-more" v-if="loading">
						<view class="loading-icon"></view>
						<text class="loading-text">加载中...</text>
					</view>
					
					<!-- 无更多数据 -->
					<view v-if="!hasMore && balanceLogs.length > 0" class="no-more">
						<text class="no-more-text">没有更多数据了</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/utils/request'

export default {
	data() {
		return {
			userInfo: {
				balance: '0.00'
			},
			balanceLogs: [],
			page: 1,
			hasMore: true,
			loading: false
		}
	},
	onShow() {
		this.getUserInfo()
		this.getBalanceLogs()
	},
	// 上拉加载
	onReachBottom() {
		if (this.hasMore) {
			this.page++
			this.getBalanceLogs()
		}
	},
	methods: {
		// 重载页面数据
		reload() {
			this.page = 1
			this.hasMore = true
			Promise.all([
				this.getUserInfo(),
				this.getBalanceLogs()
			])
		},
		// 获取用户信息
		async getUserInfo() {
			try {
				const res = await request({
					url: '/wechat/user/me'
				})
				
				if (res.code === 0 && res.data) {
					this.userInfo = res.data
				}
			} catch (err) {
				console.error('获取用户信息失败', err)
			}
		},
		
		// 获取余额记录
		async getBalanceLogs() {
			if (this.loading) return
			this.loading = true
			
			try {
				const res = await request({
					url: '/wechat/user/balanceLogs',
					data: {
						page: this.page
					}
				})
				
				if (res.code === 0 && res.data) {
					if (this.page === 1) {
						this.balanceLogs = res.data.data
					} else {
						this.balanceLogs = [...this.balanceLogs, ...res.data.data]
					}
					this.hasMore = !!res.data.next_page_url
				}
			} catch (err) {
				console.error('获取余额记录失败', err)
			} finally {
				this.loading = false
				uni.stopPullDownRefresh()
			}
		},
		
		handleWithdraw() {
			uni.navigateTo({
				url: '/pages/wallet/cash'
			})
		},
		
		handleCashList() {
			uni.navigateTo({
				url: '/pages/wallet/cash-list'
			})
		}
	}
}
</script>

<style>
.wallet-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: env(safe-area-inset-bottom);
}

.balance-card {
	background: linear-gradient(135deg, #007AFF, #1E90FF);
	margin: 20rpx;
	padding: 40rpx;
	border-radius: 16rpx;
	color: #ffffff;
}

.balance-title {
	font-size: 28rpx;
	opacity: 0.9;
}

.balance-amount {
	font-size: 60rpx;
	font-weight: bold;
	margin: 20rpx 0 40rpx;
}

.balance-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	background-color: rgba(255, 255, 255, 0.2);
	padding: 12rpx 40rpx;
	border-radius: 30rpx;
	font-size: 28rpx;
}

.transaction-section {
	background-color: #ffffff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	padding: 20rpx;
	border-bottom: 1rpx solid #eee;
}

.transaction-item {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.trans-left {
	display: flex;
	flex-direction: column;
}

.trans-type {
	font-size: 28rpx;
    font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.trans-time {
	font-size: 24rpx;
	color: #999;
}

.trans-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.trans-amount {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.trans-amount.income {
	color: #00CC33;
}

.trans-amount.expense {
	color: #ff6b6b;
}

.trans-balance {
	font-size: 24rpx;
	color: #999;
}

/* 空数据样式 */
.empty-box {
	padding: 60rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

/* 加载更多样式 */
.loading-more {
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
	border: 4rpx solid #f3f3f3;
	border-top: 4rpx solid #007AFF;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.loading-text {
	font-size: 24rpx;
	color: #999;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 无更多数据样式 */
.no-more {
	padding: 30rpx;
	text-align: center;
}

.no-more-text {
	font-size: 24rpx;
	color: #999;
	position: relative;
	display: inline-block;
	padding: 0 30rpx;
}

.no-more-text::before,
.no-more-text::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 80rpx;
	height: 1rpx;
	background-color: #eee;
}

.no-more-text::before {
	left: -80rpx;
}

.no-more-text::after {
	right: -80rpx;
}

/* 优化列表样式 */
.transaction-list {
	min-height: 200rpx;
}

.transaction-item:last-child {
	border-bottom: none;
}
</style>

